<template>
    <div class="searchBar">
        <el-form :inline="true" :model="searchUserForm" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="searchUserForm.shopname" placeholder="名称" style="width: 100px;" />
            </el-form-item>
            <el-form-item label="类别">
                <el-select v-model="searchUserForm.shoptype" clearable placeholder="类别" style="width: 100px;">
                    <el-option v-for="(item, index) in types" :key="index" :label="item.typeName"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="onAddShop">新增</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div>
        <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%"
            max-height="500">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="id" label="编号" width="150" />
            <el-table-column prop="shopName" label="名称" width="150" />
            <el-table-column prop="path" label="图片" width="150">
                <template #default="scope">
                    <el-image style="width:80px;height:80px" :src="scope.row.path"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格(元)" width="150" />
            <el-table-column prop="typeInfo.typeName" label="分类" width="150" />
            <el-table-column prop="address" label="简介" width="600" />
            <el-table-column fixed="right" label="操作" width="300">
                <template #default="scope">
                    <el-button type="primary" size="small" @click.prevent="updateShopFun(scope.$index)">
                        修改
                    </el-button>
                    <el-button type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-size="pagesize" layout="prev, pager, next, jumper"
            :total="tableData.length" v-if="(tableData.length != 0)">
        </el-pagination>
    </div> 
    <addShop :addShopShow="addShopShow" :types="types" @closeAddShop="closeAddShop"  @addShopComplete="onSubmit" />
    <updateShop :updateShopShow="updateShopShow" :shopInfo="updateShopVal" :types="types" @closeUpdateShop="closeUpdateShop" @updateShopComplete="onSubmit" />
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { getShopAllTypes, getSeachShop, deleteShop,downloadShopPic } from '@/api/shops'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import addShop from './components/addShop.vue'
import updateShop from './components/updateShop.vue'


const searchUserForm = reactive({
    id:'',
    shopname: '',
    shoptype: ''
})
let types: any = ref([]);
onMounted(async () => {
    types.value = (await getShopAllTypes()).data.types
    console.log("types", types)
})

const tableData = ref([])


const onSubmit = async () => {
    try {
        // console.log(searchUserForm);
        const seachShops: any = await getSeachShop(searchUserForm);
        // console.log(seachShops.data);
        for(var i = 0;i<seachShops.data.seachResult.shops.length;i++){
            let id = seachShops.data.seachResult.shops[i].id
            const ShopsPic: any = await downloadShopPic(id);
            // console.log("ShopsPic",ShopsPic);
            let blobFile = new Blob([ShopsPic],{type:'image/png'})//第一个参数是大小和属性，第二个参数是文件类型image，后缀png
            seachShops.data.seachResult.shops[i].path = window.URL.createObjectURL(blobFile)//对象Url代表某一个file对象
            // console.log("转换后",seachShops.data.seachResult.shops[i].path);
        }
        tableData.value = seachShops.data.seachResult.shops
        console.log("tableData",tableData);
        
    } catch (error) {
        console.log(error);
        ElMessage.error("搜索用户信息失败失败！！！")
    }
    
}

//分页
const pagesize = ref(4)//每页多少个
const handleSizeChange = (size: any) => {
    // console.log(size);     
    pagesize.value = size;
    // console.log(pagesize.value); //每页下拉显示数据
}

const currentPage = ref(1)//默认第几页
const handleCurrentChange = (current: any) => {
    // console.log(current); 
    currentPage.value = current
    // console.log(currentPage.value); //点击第几页
}

//添加
const addShopShow = ref(false)
const onAddShop = () => {
    addShopShow.value = true;
}
const closeAddShop = (v: boolean) => {
    // console.log(v)
    addShopShow.value = false;
    onSubmit()
}

const updateShopShow = ref(false)

const closeUpdateShop= (v: boolean) => {
    // console.log(v)
    updateShopShow.value = false;
    onSubmit()
}

const updateShopVal = ref()
const updateShopFun = (index: number) => {
    let shopInfo = tableData.value[pagesize.value * (currentPage.value - 1) + index]
    console.log("shopInfo", shopInfo)
    updateShopVal.value = shopInfo;
    updateShopShow.value = true;
}


//删除
const deleteRow = (index: number) => {
    // tableData.value.splice(pagesize.value * (currentPage.value - 1) + index, 1)
    let data = tableData.value[pagesize.value * (currentPage.value - 1) + index]
    console.log(data.id);
    // loading.value = true;
    ElMessageBox.confirm(
        '确定要删除 ' + data.shopName + '  这件商品吗?',
        '警告',
        {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        try {
            const deleteResult: any = await deleteShop(data.id);
            if (deleteResult.success) {
                ElMessage({
                    type: 'info',
                    message: deleteResult.info.msg,
                })
            } else {
                ElMessage({
                    type: 'warning',
                    message: deleteResult.info.msg,
                })
            }
            loading.close()
            onSubmit()
        } catch (error) {
            loading.close()
            console.log(error)
        }
    }).catch((error) => {
        console.log(error)
    })


}

</script>

<style scoped>
.searchBar {
    margin-top: 20px;
    margin-bottom: 20px;
}

.el-alert {
    margin: 20px 0 0;
}

.el-alert:first-child {
    margin: 0;
}

.item_image {
    width: 110px;
    height: 80px;
    border-radius: 5px;
}

</style>